<template>
  <div class="list">
    <Header>
      <div>分类</div>
    </Header>
    <div class="list-container">
      <div class="list-main">
        <div class="list-l" ref="left">
          <ul class="l-item">
            <li
              :class="{ active: index === currentIndex }"
              v-for="(item, index) in leftData"
              :key="item.id"
              @click="goScroll(index)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="list-r" ref="right">
          <div ref="rightShopList">
            <ul v-for="(item, index) in rightData" :key="index" class="r-ul">
              <li class="shop-list" v-for="(k, index) in item" :key="index">
                <h2>-- {{ k.title }} --</h2>
                <ul class="r-content">
                  <li v-for="(lists, index) in k.list" :key="index">
                    <img :src="lists.imgUrl" alt="" />
                    <span>{{ lists.name }}</span>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <Tabbar />
    </div>
  </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar'
import Header from '../components/search/Header'
import http from '@/serveies/api/request'
import BScroll from 'better-scroll'
export default {
  name: 'List',
  data () {
    return {
      leftData: [],
      rightData: [],
      bsl: '',
      bsr: '',
      allHeight: [],
      scrollY: 0
    }
  },
  components: {
    Tabbar,
    Header
  },
  created () {
    this.initHttp()
  },
  computed: {
    currentIndex () {
      return this.allHeight.findIndex((item, index) => {
        return this.scrollY >= item && this.scrollY < this.allHeight[index + 1]
      })
    }
  },
  methods: {
    async initHttp () {
      const res = await http.$axios({
        url: '/api/goods/list'
      })
      const leftArr = []
      const rightArr = []
      res.forEach((v) => {
        leftArr.push({
          id: v.id,
          name: v.name
        })
        rightArr.push(v.data)
      })
      this.leftData = leftArr
      this.rightData = rightArr
      // 等DOM都加载完在执行的代码
      this.$nextTick(() => {
        this.bsl = new BScroll(this.$refs.left, {
          click: true
        })
        this.bsr = new BScroll(this.$refs.right, {
          click: true,
          probeType: 3
        })
        let height = 0
        this.allHeight.push(height)
        // 获取每一块的搞
        const uls = this.$refs.rightShopList.getElementsByClassName('r-ul')
        Array.from(uls).forEach((v) => {
          height += v.clientHeight
          this.allHeight.push(height)
        })
        // 右侧滑动
        this.bsr.on('scroll', (pos) => {
          this.scrollY = Math.abs(pos.y)
        })
      })
    },
    goScroll (index) {
      // console.log(this.allHeight[index])
      // this.currentIndex = index
      this.bsr.scrollTo(0, -this.allHeight[index], 300)
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  color: #fb7d34 !important;
  font-size: 0.45rem !important;
  overflow: hidden;
}
.list-main {
  display: flex;
  position: absolute;
  top: 1.12rem;
  bottom: 1.36rem;
  overflow: hidden;
  .list-l {
    width: 2.4rem;
    background-color: #eee;
    font-size: 0.64rem;
    overflow: hidden;
    .l-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      li {
        width: 100%;
        font-size: 0.38rem;
        height: 1.333333rem;
        line-height: 1.333333rem;
        padding: 0.266667rem 0.133333rem 0;
        text-align: center;
        color: #666;
        overflow: hidden;
      }
    }
  }
  .list-r {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .shop-list {
      text-align: center;
      h2 {
        font-size: 0.533333rem;
        font-weight: normal;
        color: #333;
      }
      .r-content {
        display: flex;
        flex-wrap: wrap;
        padding: 0.266667rem;
        li {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 2.346667rem;
          height: 2.133333rem;
          margin-bottom: 0.266667rem;
          img {
            width: 1.386667rem;
          }
          span {
            margin-top: 0.28rem;
            white-space: nowrap;
            font-size: 0.32rem;
            color: raga(0, 0, 0, 0.54);
          }
        }
      }
    }
  }
}
</style>
